<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    *{margin: 0; padding: 0; border: 0;}
    .ball{width: 20px;height: 20px;border-radius: 50%;background: red;position: fixed;display: none;z-index: 100;}
    .list{width: 500px;}
    .list li{height: 50px;margin-bottom: 5px;background: rgba(0,0,0, 0.1);display: block;}
    .list li h1{display: inline;font-size: 18px;line-height: 50px;}
    .list li button{float: right;margin: 12px 12px 0 0;width: 20px;height: 20px;border-radius: 50%;background: red;color: seashell;cursor: pointer;}
    footer{position: fixed;left: 0;bottom: 0;width: 500px;height: 100px;background: #ff9900;}
    footer span{float: right;color: seashell;font-size: 20px;margin-right: 50px;font-weight: bold;border: 2px solid white;
    height: 40px;line-height: 40px;margin-top: 30px;display: block;padding: 0 20px;}
  </style>
</head>
<body>
  <div class="ball"></div>
  <div class="list">
    <ul>
      <li>
        <h1>hello world-1</h1>
        <button class="btn1">+</button>
      </li>
      <li>
        <h1>hello world-2</h1>
        <button class="btn2">+</button>
      </li>
      <li>
        <h1>hello world-3</h1>
        <button class="btn3">+</button>
      </li>
    </ul>
  </div>
  <footer>
    <span class="cart">到碗里来</span>
  </footer>
  <script src="roll.js"></script>
  <script>
    var ball = document.querySelector(".ball");                       //隐藏的小球(应该放在最外层)
    var cart = document.querySelector(".cart");                       //购物车
    var btn = document.querySelectorAll('.list li button');           //加号按钮
    var roll = new Roll(ball, cart, 500, 'sineaseIn');                //生成实例
    btn[0].addEventListener('click',function (e) {
      roll.move(e.target);                                            //传递当前的按钮
    })
    btn[1].addEventListener('click',function (e) {
      roll.move(e.target);                                            //传递当前的按钮
    })
    btn[2].addEventListener('click',function (e) {
      roll.move(e.target);                                            //传递当前的按钮
    })
  </script>
</body>
</html>